<template>
  <vab-card class="box">
    <div class="flex_sb box_top">
      <span class="homeTitile">系统公告</span>
      <div>
        <span
          v-for="(item, i) in tagList"
          :key="i"
          class="tabli"
          :class="{ active: tagInedx == item }"
          @click="handleTab(item)"
        >
          {{ item }}
        </span>
      </div>
    </div>
    <main class="content">
      <aside
        class="fadeIn"
        v-for="(item, i) in articleList[dotIndex - 1]"
        :key="i"
      >
        <div class="flex_sb_notalign" @click="router.push('/guide/index')">
          <span class="tag">{{ item.tag }}</span>
          <div class="name">
            <span class="title">{{ item.title }}</span>
            <!-- <span :title="item.content">
              {{ item.content }}
            </span> -->
          </div>
          <div class="time">{{ item.publish_at }}</div>
        </div>
      </aside>
      <el-empty
        v-if="!articleList.length"
        :image-size="50"
        description="暂无数据"
      />
    </main>
    <div class="dotsBox" v-if="articleList.length > 1">
      <div
        v-for="item in 2"
        :key="item"
        class="dots_pa"
        :class="{ active: dotIndex == item }"
        @click="handleSelectDot(item)"
      >
        <div class="dots"></div>
      </div>
    </div>
  </vab-card>
</template>

<script setup lang="ts">
  import { getArticleList } from '~/src/api/dms/home/homeCustomer'
  import { ArraySliceLength } from '~/src/utils/utils'

  const router = useRouter()

  const articleList = ref<any>([])
  const tagList = ['上线', '新增', '优化']
  const tagInedx = ref('上线')
  const dotIndex = ref(1)

  const handleTab = (key: string) => {
    tagInedx.value = key
    _getArticleList()
  }

  const handleSelectDot = (i: number) => {
    dotIndex.value = i
  }

  // 获取公告
  const _getArticleList = async () => {
    try {
      try {
        let data = {
          status: 1,
          type: '',
          page: 1,
          limit: 10,
          tag: tagInedx.value || '上线',
          platform: 'dms.admin',
        }

        let res = await getArticleList({ ...data })
        const { list } = res.data

        articleList.value = ArraySliceLength(list, 3)
      } catch (error) {}
    } catch (error) {}
  }

  onMounted(() => {
    _getArticleList()
  })
</script>

<style lang="scss" scoped>
  .box {
    margin-bottom: 24px;
    position: relative;
    .flex_sb_notalign {
      cursor: pointer;
    }

    .dotsBox {
      bottom: -8px;
      right: 3px;
    }

    :deep() {
      .el-card__body {
        padding: 16px 24px 16px !important;
      }
      .el-empty {
        padding: 0;
      }
    }

    :deep() {
      .el-card__header {
        padding: 16px 24px 16px;
      }
    }

    .fl {
      display: flex;
    }

    .box_top {
      margin-bottom: 16px;
    }

    .content {
      width: 100%;
      height: 100px;
      overflow-y: auto;
      position: relative;

      .title {
        font-weight: 600;
        word-break: keep-all;
        margin-right: 4px;
      }

      .time {
        text-align: right;
        color: #868585;
        font-size: 12px;
        line-height: 23px;
      }
    }

    .name {
      flex: 1;
      text-align: left;
      line-height: 20px;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 4px;
    }

    aside {
      padding-bottom: 4px;
      margin-bottom: 15px;

      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        margin-bottom: 0px;
      }

      .tag {
        padding: 0 8px;
        height: 22px;
        background: #1456f01f;
        border-radius: 4px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 12px;
        color: #1456f0;
        letter-spacing: 0;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        word-break: keep-all;

        &.activity {
          background: #ff840d26;
          color: #ff840d;
        }
      }

      .text {
        flex: 1;
        max-width: 600px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }

  .tabli {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    font-family: PingFangSC-Regular;
    font-weight: 300;
    font-size: 12px;
    color: #595959;
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;
    cursor: pointer;

    &.active {
      background: #1456f0 !important;
      color: #ffffff !important;
      border-radius: 4px;
      transition: all 0.5s ease-in-out;
    }
  }
</style>
